<#import "/macro.ftl" as m>
<@m.page_header title='合家红包' />
<div id="page-content-wrapper">
    <div id="page-title">
        <h3>合家红包</h3>
        <div id="breadcrumb-right">
            <div class="float-right">
                <a href="javascript:;" class="btn medium primary-bg" onclick="showAdd();">
                    <span class="button-content">添加合家红包</span>
                </a>
            </div>
        </div>
    </div>
    <div id="page-content">
    	<form id="form" action="/hejiaredpackets" method="get">
    		<div class="row">
    			<div class="col-md-6">
    				<div class="form-row">
		    			<div class="form-input col-md-4">
		    				<input placeholder="发放日从" type="text" name="startTime" value="<#if startTime??>${startTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" onclick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
		    			</div>
		    			<div class="form-label col-md-1">
		    				<label>-</label>
		    			</div>
		    			<div class="form-input col-md-4">
				        	<input placeholder="发放日" type="text" name="endTime" value="<#if endTime??>${endTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" onclick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
				        </div>
				        <div class="form-input col-md-2">
				        	<a href="javascript:;" class="btn large primary-bg radius-all-4" id="search" title="Validate!" onclick="$('#form').trigger('submit');">
					            <span class="button-content">
					                查询
					            </span>
			                </a>
				        </div>
		    		</div>
    			</div>
    		</div>
    	</form>
    	<table class="table">
	        <thead>
	            <tr>
	                <th>总金额</th>
	                <th class="text-center">红包个数</th>
	                <th>最大金额</th>
	                <th>最小金额</th>
	                <th>领取开始时间<br />领取结束时间</th>
	                <th>红包URL</th>
	                <th>操作</th>
	            </tr>
	        </thead>
	        <tbody>
	        	<#list hejiaRedPackets.list as hejiaRedPacket>
					<tr id="${hejiaRedPacket.id}">
		                <td class="text-right">${hejiaRedPacket.totalAmount?string(',##0')}元</td>
		                <td class="text-right">${hejiaRedPacket.number?string(',##0')}</td>
		                <td>${hejiaRedPacket.maxAmount}元</td>
		                <td>${hejiaRedPacket.minAmount}元</td>
		                <td>
		                	${hejiaRedPacket.receiveStartTime?string('yyyy-MM-dd HH:mm:ss')} <br />
		                	${hejiaRedPacket.receiveEndTime?string('yyyy-MM-dd HH:mm:ss')}
		                </td>
		                <td>
		                	<div class="form-row">
				                <div class="form-input col-md-9">
				                    <input placeholder="" type="text" id="name" name="name" value="${hejiaRedPacketUrl}?externalId=${hejiaRedPacket.externalId}" data-required="true" data-rangelength="[1,45]">
				                </div>
				                <div class="form-input col-md-3">
				                    <span>
								   		<object style="vertical-align:middle;" allowscriptaccess="always" type="application/x-shockwave-flash" width="14" height="14" data="/assets/flash/clippy.swf" flashvars="text=${hejiaRedPacketUrl}?externalId=${hejiaRedPacket.externalId}" title="复制到剪贴板">
											<param name="quality" value="high">
											<param name="bgcolor" value="#ffffff">
											<param name="scale" value="noscale">
											<param name="wmode" value="transparent">
											<param name="flashvars" value="text=${hejiaRedPacketUrl}?externalId=${hejiaRedPacket.externalId}">
											<embed type="application/x-shockwave-flash" quality="high" bgcolor="#ffffff" scale="noscale" wmode="transparent" flashvars="text=${hejiaRedPacketUrl}?externalId=${hejiaRedPacket.externalId}" width="14" height="14">
										</object>
									</span>
									复制
				                </div>
					        </div>
		                </td>
		                <td>
		                    <div class="dropdown">
                                <a href="javascript:;" title="" class="btn medium bg-blue" data-toggle="dropdown">
                                    <span class="button-content">
                                        <i class="glyph-icon font-size-11 icon-cog"></i>
                                        <i class="glyph-icon font-size-11 icon-chevron-down"></i>
                                    </span>
                                </a>
                                <ul class="dropdown-menu float-right">
                                    <li>
                                        <a href="javascript:;" onclick="showDelete(${hejiaRedPacket.id});">
					                    	<i class="glyph-icon icon-remove mrg5R"></i>
                                            删除
					                    </a>
                                    </li>
                                </ul>
                            </div>
		                </td>
		            </tr>
				</#list>    
	    	</tbody>
	    </table>
	    <div class="button-group center-div">
	    	${pagerHelper.content}
	    </div>
    </div>
</div>

<div id="add-hejiaredpacket-template" class="hide">
    <form id="form-add-presale" action="/pushMessage/push" method="post" class="mrg10A">
        <div class="row">
            <div class="col-md-6">
                <div class="form-row">
                    <div class="form-label col-md-5">
                        <label for="">总金额:</label>
                    </div>
                    <div class="form-input col-md-7">
                        <input placeholder="元" type="text" name="totalAmount" data-required="true" data-rangelength="[1,100000000]" class="parsley-validated">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-row">
                    <div class="form-label col-md-5">
                        <label for="">红包个数:</label>
                    </div>
                    <div class="form-input col-md-7">
                        <input placeholder="个" type="text" name="number" data-required="true" data-rangelength="[1,10000]" class="parsley-validated">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-row">
                    <div class="form-label col-md-5">
                        <label for="">最大金额:</label>
                    </div>
                    <div class="form-input col-md-7">
                        <input placeholder="元" type="text" name="maxAmount" data-required="true" data-rangelength="[1,100000000]" class="parsley-validated">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-row">
                    <div class="form-label col-md-5">
                        <label for="">最小金额:</label>
                    </div>
                    <div class="form-input col-md-7">
                        <input placeholder="个" type="text" name="minAmount" value="1" data-required="true" data-rangelength="[1,10000]" class="parsley-validated">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-row">
                    <div class="form-label col-md-5">
                        <label for="">领取开始时间:</label>
                    </div>
                    <div class="form-input col-md-7">
                        <input placeholder="" type="text" name="receiveStartTime" data-required="true" class="parsley-validated" onclick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-row">
                    <div class="form-label col-md-5">
                        <label for="">领取结束时间:</label>
                    </div>
                    <div class="form-input col-md-7">
                        <input placeholder="" type="text" name="receiveEndTime" data-required="true" class="parsley-validated" onclick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>

function showAdd(){
    var html = '<div id="dialog" class="hide" title="添加合家红包">' + $("#add-hejiaredpacket-template").html() + '</div>';
    $( html ).dialog({
        resizable:!0,
        minWidth:600,
        minHeight:250,
        modal:!0,
        dialogClass:"modal-dialog",
        closeOnEscape:!0,
        close : function() {
            $( this ).dialog( "destroy" );
        },
        buttons: {
            保存: function() {
                var valid = $('#dialog form').parsley( 'validate' );
                if(!valid){
                    return;
                }

                $.post( '/hejiaredpackets/add', $( '#dialog form' ).serialize() )
                .done(function(data){
                    if(data.status == "success"){
						$( "#dialog" ).dialog( "close" );
						location.reload();
                    }else{
                        $.jGrowl(data["message"], {sticky:!1,position:"top-right",theme:"bg-red"});
                    }
                })
                .fail(function(){
                    $.jGrowl("添加合家红包失败", {sticky:!1,position:"top-right",theme:"bg-red"});
                });
            }
        }
    });
};
    
function showDelete( id ){
	$.messager.confirm( "提示", "确定删除合家红包吗？", function(){
		$.ajax({
		    url: '/hejiaredpackets/' + id,
		    type: 'POST',
		    data: { _method: 'DELETE' }
		})
	    .done(function(data){
	     	if(data["status"] == "success"){
	     		$.jGrowl("删除合家红包成功", {sticky:!1,position:"top-right",theme:"bg-green"});
	     		$('.table').find('tr[id=' + id + ']').remove();
	     	}else{
	     		$.jGrowl(data["message"], {sticky:!1,position:"top-right",theme:"bg-red"});
	     	}
	     })
	     .fail(function(){
	     	$.jGrowl("删除合家红包失败", {sticky:!1,position:"top-right",theme:"bg-red"});
	     });
	});
};

</script>